<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>学院首页</title>
    <link rel="stylesheet" href="./css/header.css" th:href="@{/css/header.css}"/>
    <link rel="stylesheet" href="./css/footer.css" th:href="@{/css/footer.css}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">
    <link rel="stylesheet" href="./css/kj.css" th:href="@{/css/kj.css}"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.2/jquery.js"></script>
    <script src="/dianqi/js/index.js" th:src="@{/js/index.js}" th:inline="javascript"></script>
    <script src="/dianqi/js/kj.js" th:src="@{/js/kj.js}" th:inline="javascript"></script>
    <style>
        .white {
            margin-left: 23px;
            margin-top: 5px;
            height: 100%;
            width: 11px;
            background-color: white;
        }

        .content-div {
            height: 318px;
            border: 3px;
            border-style: solid;
            border-color: #002B5E;
        }

        .xueyuan-list {
            list-style-type: none;
            margin-left: 8%;
            margin-top: 13%;
        }

        .xueyuan-list li {
            margin-top: 0px;
        }

        .content-div-footer {
            margin-bottom: 3px;
            width: 98.8%;
            height: 50px;
            background-color: #44567f;
            position: absolute;
            bottom: 0;
            padding-top: 5px;
        }

        .display {
            display: none
        }
    </style>
</head>
<body>
<div id="app">
    <!-- header start -->
    <div id="header">
        <div class='header-wrap'>
            <div class='header'>
                <div class='header-right'>
                    <ul class='header-list'>
                        <li><a href=''><span style='font-size: x-small;'>设为首页</span></a>
                        </li>
                        <li><a onclick='add()'><span style='font-size: x-small;'>加入收藏
						</span></a></li>
                        <li><a href=''><span style='font-size: x-small;'>联系我们</span></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class='header-nav'>
                <div class='header-school-logo' style='margin-left: 10px;'>
                    <img src='../static/img/logo.png' th:src="@{/img/logo.png}" alt='' width='20%'
                         style='min-width: 130px;'>
                    <img src='../static/img/title.png' th:src="@{/img/title.png}" alt='' width='30%'
                         style='min-width: 130px;'>
                </div>
                <div class='header-navbar' id='rq'>
                    <ul class='nabbar-list' id='zrq'>
                        <li><a href='index.html' th:href="@{/index}">学院首页</a></li>
                        <li><a href='xueyuangaikuang.html' th:href="@{/toXueYuanGaiKuang}">学院概况</a></li>
                        <li><a href='shiziduiwu.html' th:href="@{/toShiziduiwu}">师资队伍</a></li>
                        <li><a href="#">人才培养</a>
                            <ul>
                                <li><a class='rc' href='rencaipeiyang_benke.html' th:href="@{/toRencaipeiyang_benke}">
                                    &nbsp;本科招生&nbsp;&nbsp;
                                </a></li>
                                <li><a class='rc' href='rencaipeiyang_yanjiusheng.html' th:href="@{/toRencaipeiyang_yanjiusheng}">
                                    研究生招生
                                </a></li>
                            </ul>
                        </li>
                        <li><a href='kexueyanjiu.html' th:href="@{/toKexueyanjiu}">科学研究</a></li>
                        <li><a href='tuanduigongzuo.html' th:href="@{/toTuanduigongzuo}">团队工作</a></li>
                        <li><a href='zhaoshengjiuye.html' th:href="@{/toZhaoshengjiuye}">招生就业</a></li>
                        <li><a href='hezuojiaoliu.html' th:href="@{/toHezuojiaoliu}">交流合作</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- header end -->

    <!-- content start -->
    <div class="content">
        <div class="content-header">
            <span style="color: white;font-size:35px">河南科技大学</span><br>
            <span style="color: white;font-size:50px;font-weight: bold;">电气工程学院</span><br>
            <button type="button" class="self-btn">学院简介</button>
        </div>
    </div>
    <br>
    <div class="content-center">
        <div class="container-fluid" style="margin: 0px;padding: 0px;">
            <div class="row" style="margin: 0px;padding: 0px;margin-left: 14px">
                <div class="col-md col-md-4" style="background-color: #002b5e;height:35px;">
                    <div class="white">

                    </div>
                </div>
                <div class="col-md" style="background-color: #002b5e;margin-left: 35px;height:35px;">
                    <div class="white">

                    </div>
                </div>
            </div>
            <div class="row" style="margin: 0px;padding: 0px;margin-left: 14px">
                <div class="col-md col-md-4" style="margin-left: 17px;">
                    <span style="color: #002b5e;font-weight: bold;font-size: 20px;float: left;margin-left: -23px;">学院简介</span>
                    <div>
                        <!--					<span style="color: #002b5e;font-weight: bold;font-size: 20px;float: right;margin-right: 2px;">-->
                        <!--						<a th:href="@{/articleList/1}" class="more" style="text-decoration: none;"-->
                        <!--                           target="_blank">MORE</a>-->
                        <!--                    </span>-->
                        <div style="width: 20px;height: 20px;border-radius: 100%;background-color: #002B5E;float: right;margin-top: 5px;margin-right: 10px;"></div>
                    </div>
                </div>
                <div class="col-md" style="margin-left: 35px">
                    <span style="color: #002b5e;font-weight: bold;font-size: 20px;float: left;margin-left: -23px;">通知公告</span>
                    <div>
					<span style="color: #002b5e;font-weight: bold;font-size: 20px;float: right;margin-right: -5px;">
                       <a th:href="@{/articleList/2}" class="more" style="text-decoration: none;"
                          target="_blank">MORE</a>
                    </span>
                        <div style="width: 20px;height: 20px;border-radius: 100%;background-color: #002B5E;float: right;margin-top: 5px;margin-right: 10px;"></div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 0px;padding: 0px;margin-top: 5px;margin-left: 14px">
                <div class="col-md col-md-4" style="margin-right: 0px;padding: 0px;">
                    <div class="content-div">
                        aaa
                    </div>
                </div>
                <div class="col-md" style="margin-left: 22px;margin-right: -5px;height: 100%">
                    <div class="content-div" style="height: 100%">
                        <table class="table table-hover text-center" width="100%;">
                            <tr>
                                <th>编号</th>
                                <th>分类</th>
                                <th>标题</th>
<!--                                <th>日期</th>-->
                                <th>点击次数</th>
                            </tr>
                            <tr v-for="(item,index) in publics">
                                <td >{{index+1}}</td>
                                <td>[通知公告]</td>
                                <td><a :href="'/dianqi/article/'+item.id"  v-text="item.title" ></a></td>
<!--                                <td>{{item.date}}</td>-->
                                <td><span class="text-danger">{{item.views}}</span>&nbsp;次点击</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 0px;padding: 0px;margin-top: 15px;margin-left: 14px">
                <div class="col-md col-md-4" style="background-color: #002b5e;height:35px;">
                    <div class="white">

                    </div>
                </div>
                <div class="col-md" style="background-color: #002b5e;margin-left: 35px;height:35px;">
                    <div class="white">

                    </div>
                </div>
            </div>
            <div class="row" style="margin: 0px;padding: 0px;margin-left: 14px">
                <div class="col-md col-md-4" style="margin-left: 17px;">
                    <span style="color: #002b5e;font-weight: bold;font-size: 20px;float: left;margin-left: -23px;">教学机构</span>
                    <div>
                        <!--                    <span style="color: #002b5e;font-weight: bold;font-size: 20px;float: right;"><a href="" class="more"-->
                        <!--                                                                                                    style="text-decoration: none;">MORE</a></span>-->
                        <div style="width: 20px;height: 20px;border-radius: 100%;background-color: #002B5E;float: right;margin-top: 5px;margin-right: 10px;"></div>
                    </div>
                </div>
                <div class="col-md" style="margin-left: 35px">
                    <span style="color: #002b5e;font-weight: bold;font-size: 20px;float: left;margin-left: -23px;">学院新闻</span>
                    <div>
					<span style="color: #002b5e;font-weight: bold;font-size: 20px;float: right;margin-right: 2px;">
						<a th:href="@{/articleList/1}" class="more" style="text-decoration: none;"
                           target="_blank">MORE</a>
                    </span>
                        <div style="width: 20px;height: 20px;border-radius: 100%;background-color: #002B5E;float: right;margin-top: 5px;margin-right: 10px;"></div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin: 0px;padding: 0px;margin-top: 5px;margin-left: 8px;height: 100%">
                <div class="col-md col-md-4" style="margin-right: 0px;padding: 0px;height: 100%">
                    <div class="content-div" style="height: 318px">
                        <ul class="xueyuan-list">
                            <li>
                                <div style="width: 20px;height: 20px;border-radius: 100%;margin-top: 5px;float: left;background-color: #002B5E;margin-right: 15px;"></div>
                                <span style="font-size: 20px;font-weight: bold;">电气工程系</span>
                            </li>
                            <li>
                                <div style="width: 20px;height: 20px;border-radius: 100%;margin-top: 5px;float: left;background-color: #002B5E;margin-right: 15px;"></div>
                                <span style="font-size: 20px;font-weight: bold;">电子科学与技术系</span>
                            </li>
                            <li>
                                <div style="width: 20px;height: 20px;border-radius: 100%;margin-top: 5px;float: left;background-color: #002B5E;margin-right: 15px;"></div>
                                <span style="font-size: 20px;font-weight: bold;">电工基础教学部</span>
                            </li>
                            <li>
                                <div style="width: 20px;height: 20px;border-radius: 100%;margin-top: 5px;float: left;background-color: #002B5E;margin-right: 15px;"></div>
                                <span style="font-size: 20px;font-weight: bold;">电工电子实验教学中心</span>
                            </li>
                        </ul>
                        <div class="content-div-footer">
                            <span style="color: white;font-size: 24px;padding-left: 25px;font-weight: bold;">党务政务公开</span>
                        </div>
                    </div>
                </div>
                <div class="col-md" style="margin-left: 22px;margin-right: -5px;height: 100%">
                    <div class="content-div" style="height: 100%">
                        <table class="table table-hover text-center" width="100%">
                            <tr>
                                <th>编号</th>
                                <th>分类</th>
                                <th>标题</th>
<!--                                <th>日期</th>-->
                                <th>点击次数</th>
                            </tr>
                            <tr v-for="(item,index) in news">
                                <td >{{index+1}}</td>
                                <td>[学院新闻]</td>
                                <td><a :href="'/dianqi/article/'+item.id"  v-text="item.title" ></a></td>
<!--                                <td>{{item.date}}</td>-->
                                <td><span class="text-danger">{{item.views}}</span>&nbsp;次点击</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12"></div>
    <!-- content end -->


    <br>
    <br>
    <!-- footer start -->
    <div id="footer" style="float: bottom">
        <div class='footer'>
            <div class='footer-school-logo'><img src='../img/logo.png' th:src="@{/img/logo.png}" alt='' width='20%'
                                                 style='min-width: 70px;'><img
                    src='../img/title.png' th:src="@{/img/title.png}" alt='' width='30%' style='min-width: 160px;'><img
                    src='../img/weichat.jpg' th:src="@{/img/weichat.jpg}"
                    class='weichat' alt=''
                    width='10%'
                    style='min-width: 80px;'></div>
            <div class='footer-line'></div>
            <div class='footer-text-div'><span class='footer-text'>版权所有: 河南科技大学电气工程学院</span><br><span
                    class='footer-text'>地址: 河南省洛阳市洛龙区263号</span>
                <p id='z' class='display'></p><span class='footer-text' style='margin-left: 140px;'>邮编: 471023</span>
            </div>
        </div>
    </div>
    <!-- footer end -->
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script>
    const vue = new Vue({
        el: '#app',
        data: {
            publics: [],
            news: []
        },
        created() {
            this.getCurrentPublicInfo()
            this.getCurrentNewsInfo()
        },
        methods: {
            getCurrentPublicInfo() {
                axios.get("/dianqi/indexPublic")
                    .then(response => {
                        // console.log(JSON.parse(response.data.publics))
                        // var jsonStr = JSON.stringify(response.data.publics)
                        this.publics = response.data.publics;
                        // alert("请求成功！"+)
                    })
                    .catch(error => { // 请求失败处理
                        alert("页面公告初始化失败")
                    });
            },
            getCurrentNewsInfo() {
                axios.get("/dianqi/indexNews")
                    .then(response => {
                        // console.log(JSON.parse(response.data.publics))
                        // var jsonStr = JSON.stringify(response.data.publics)
                        this.news = response.data.news;
                    })
                    .catch(error => { // 请求失败处理
                        alert("页面公告初始化失败")
                    });
            }
        },
    })
    $(function () {

    })
</script>
